<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<title>数据查看</title>
		<link rel="stylesheet" href="css/dataView.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.vticker.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/china.js"></script>
		<script type="text/javascript" src="js/adapter.js"></script>
	</head>

	<body>
		<div class="content">
			<div class="logo">
				<img src="img/logo.png" />
			</div>
			<div class="theme">
				<img src="img/theme.png" />
			</div>
			<div class="title">
				<img src="img/title2.png" />
			</div>

			<div class="dataview-div">

				<div class="dataview-div2">
					<div class="picture"><img src="img/activeState.png" /></div>
					<div id="main">
						
					</div>
					<div class="txt">
							<span class="spa1">0k</span>
							<span class="spa2">50k</span>
							<span class="spa3">100k</span>
							<span class="spa4">150k</span>
							<span class="spa5">200k</span>
							
						</div>
					<div class="awardState">
						<ul>
							<li class="item">河北地区**获得**一份</li>
							<li class="item">湖南地区**获得**一份</li>
							<li class="item">四川地区**获得**一份</li>
							<li class="item">湖北地区**获得**一份</li>
						</ul>
					</div>

				</div>
			</div>
			<div class="backBtn"><a href="javascript:history.go(-1)">返回</a></div>
			<div class="bottom-logo"> <img src="img/bottom_logo2.png" /></div>
		</div>
	</body>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".awardState").each(function() {
				$(this).vTicker({
					showItems: 4, //显示滚动行数
					pause: 2000, //滚动间歇
					speed: 500, //滚动速度
					animation: "fade",
					mousePause: false,
					direction: "up", //滚动方向
				});
			});
		});
	</script>
	<script type="text/javascript">
		//		var timer;
		//		timer=setTimeout(function(){
		////		$(".item").pop()
		//			
		//		},1000)
		var info = [{
				id: 1,
				txt: "河北地区**获得**一份"
			},
			{
				id: 2,
				txt: "湖南地区**获得**一份"
			},
			{
				id: 3,
				txt: "四川地区**获得**一份"
			},
			{
				id: 4,
				txt: "云南地区**获得**一份"
			},
			{
				id: 5,
				txt: "江西地区**获得**一份"
			},
			{
				id: 6,
				txt: "湖北地区**获得**一份"
			}
		]
		var dataList = [{
				name: "南海诸岛",
				value: 0
			},
			{
				name: '北京',
				value: randomValue()
			},
			{
				name: '天津',
				value: randomValue()
			},
			{
				name: '上海',
				value: randomValue()
			},
			{
				name: '重庆',
				value: randomValue()
			},
			{
				name: '河北',
				value: randomValue()
			},
			{
				name: '河南',
				value: randomValue()
			},
			{
				name: '云南',
				value: randomValue()
			},
			{
				name: '辽宁',
				value: randomValue()
			},
			{
				name: '黑龙江',
				value: randomValue()
			},
			{
				name: '湖南',
				value: randomValue()
			},
			{
				name: '安徽',
				value: randomValue()
			},
			{
				name: '山东',
				value: randomValue()
			},
			{
				name: '新疆',
				value: randomValue()
			},
			{
				name: '江苏',
				value: randomValue()
			},
			{
				name: '浙江',
				value: randomValue()
			},
			{
				name: '江西',
				value: randomValue()
			},
			{
				name: '湖北',
				value: randomValue()
			},
			{
				name: '广西',
				value: randomValue()
			},
			{
				name: '甘肃',
				value: randomValue()
			},
			{
				name: '山西',
				value: randomValue()
			},
			{
				name: '内蒙古',
				value: randomValue()
			},
			{
				name: '陕西',
				value: randomValue()
			},
			{
				name: '吉林',
				value: randomValue()
			},
			{
				name: '福建',
				value: randomValue()
			},
			{
				name: '贵州',
				value: randomValue()
			},
			{
				name: '广东',
				value: randomValue()
			},
			{
				name: '青海',
				value: randomValue()
			},
			{
				name: '西藏',
				value: randomValue()
			},
			{
				name: '四川',
				value: randomValue()
			},
			{
				name: '宁夏',
				value: randomValue()
			},
			{
				name: '海南',
				value: randomValue()
			},
			{
				name: '台湾',
				value: randomValue()
			},
			{
				name: '香港',
				value: randomValue()
			},
			{
				name: '澳门',
				value: randomValue()
			}
		]
		var myChart = echarts.init(document.getElementById('main'));

		function randomValue() {
			return Math.round(Math.random() * 1000);
		}
		option = {
			//				tooltip: {
			//					formatter: function(params, ticket, callback) {
			//						return params.seriesName + '<br />' + params.name + '：' + params.value
			//					} //数据格式化
			//				},
			visualMap: {
				show: true, //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
				type: 'piecewise', // 定义为分段型 visualMap
				//type:'continuous',//连续型
				splitNumber: 4,
				min: 0,
				max: 1000,
				padding: 0,
				left: 'center',
				top: 'bottom',
//				top: '90%',
				itemGap: 0,
				itemWidth: 30  , //图形的宽度，即长条的宽度。
				itemHeight: 8,
				itemBorder:'1px solid #333',
				borderColor:'#333333',
				borderWidth:'1',
//				borderRadius:'0',
				textGap: 1,
//				textStyle: {
//					positoin:'absolute',
//					top:2,
//					color: '#fff',
//					align:'top'
//				},
//				padding: 2,
				align: 'left',
				verticalAlign: 'bottom',
				text: ['', ''], //两端的文本
				inRange: {
					color: ['#e7fff8', '#89afaf', '#5d8e8c', '#2d7472'] //取值范围的颜色
					//	symbolSize: ['0k', '50k','100k', '150k','200k']
				},
				show: true, //图注,
				//type: 'piecewise',
				orient: "horizontal",
				//				y:'85%'
				
				
			},
			
			geo: {
				map: 'china',
				roam: false, //不开启缩放和平移
				zoom: 1, //视角缩放比例
				label: {
					normal: {
						show: true,
						fontSize: '3',
						color: 'rgba(0,0,0,0.7)'
					}
				},
				itemStyle: {
					normal: {
						borderColor: 'rgba(235, 255, 249, 0.2)'
					}
					//						,
					//						emphasis: {
					//							areaColor: '#F3B329', //鼠标选择区域颜色
					//							shadowOffsetX: 0,
					//							shadowOffsetY: 0,
					//							shadowBlur: 20,
					//							borderWidth: 0,
					//							shadowColor: 'rgba(0, 0, 0, 0.5)'
					//						}
				}
			},
			series: [{
				name: '信息量',
				type: 'map',
				geoIndex: 0,
				data: dataList

			}]
		};
		myChart.setOption(option);
		//			myChart.on('click', function(params) {
		//				alert(params.name);
		//			});
	</script>

</html>